import React from 'react';

// import { HashRouter, Route, Link, BrowserRouter as Router, NavLink } from 'react-router-dom';
import { Route, Link, BrowserRouter as Router, NavLink } from 'react-router-dom';

import './index.css';
export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>app组件</h1>
          <ul>
            <li>
              <Link to="/home">首页</Link>
            </li>
            <li>
              <NavLink to="/home" activeClassName="my-active">
                首页
              </NavLink>
            </li>
            <li>
              <NavLink to="/my" activeClassName="my-active" exact>
                我的音乐
              </NavLink>
            </li>
            <li>
              <NavLink to="/friend" activeClassName="my-active">
                我的朋友
              </NavLink>
            </li>
          </ul>

          {/* 1.🔔 Route匹配是从上向下，依次匹配。与Vue不同，**默认情况下，不会匹配到停止，继续向下匹配 */}
          <Route path="/home" component={Home}></Route>
          <Route path="/home" component={Home}></Route>
          <Route path="/home" component={Home}></Route>
          <Route path="/home" component={Home}></Route>
          <Route path="/my" component={MyMusic}></Route>
          <Route path="/friend" component={Friend} exact></Route>
          {/* 2. 默认情况下，path="/"   => 能够匹配任意/开始的路径。可以配合exact用以精准匹配。*/}

          <Route path="/" component={Friend} exact></Route>
          {/* 3. 如果没有指定 path，那么一定会被渲染 类似Vue中的通配符 */}
          <Route component={MyMusic}></Route>
        </div>
      </Router>
    );
  }
}

function Home(params) {
  return <h1>我是首页组件</h1>;
}

function MyMusic(params) {
  return <h1>我是我的音乐件</h1>;
}

function Friend(params) {
  return <h1>我是朋友组件</h1>;
}
